<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { ImageViewer } from "@/components/common/ImageViewer";
import Refresh from "@iconify-icons/ep/refresh";
import { ref } from "vue";
import { useShipper } from "./utils/hook";

defineOptions({
  name: "CrossStore"
});

const formRef = ref();

const {
  form,
  loading,
  columns,
  childColumns,
  dataList,
  pagination,
  tabType,
  tabList,
  storeList,
  userList,
  useRenderIcon,
  onSearch,
  resetForm,
  handleSizeChange,
  handleCurrentChange,
  openDialog,
  handleOpt
} = useShipper();
</script>

<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="跨店销售单编号：" prop="crossStoreOrderCode">
        <el-input
          v-model="form.crossStoreOrderCode"
          placeholder="请输入"
          clearable
          class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item label="商品名称：" prop="goodsName">
        <el-input
          v-model="form.goodsName"
          placeholder="请输入"
          clearable
          class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item label="商品编码：" prop="goodsCode">
        <el-input
          v-model="form.goodsCode"
          placeholder="请输入"
          clearable
          class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item label="商品条码：" prop="barCode">
        <el-input
          v-model="form.barCode"
          placeholder="请输入"
          clearable
          class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item label="规格名称：" prop="specName">
        <el-input
          v-model="form.specName"
          placeholder="请输入"
          clearable
          class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item label="规格编码：" prop="specCode">
        <el-input
          v-model="form.specCode"
          placeholder="请输入"
          clearable
          class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item label="销售门店：" prop="storeId">
        <el-select
          v-model="form.storeId"
          filterable
          placeholder="请选择"
          clearable
          class="!w-[180px]"
        >
          <el-option
            v-for="item in storeList"
            :key="item.id"
            :label="item.storeName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="购买门店：" prop="buyStoreId">
        <el-select
          v-model="form.buyStoreId"
          filterable
          placeholder="请选择"
          clearable
          class="!w-[180px]"
        >
          <el-option
            v-for="item in storeList"
            :key="item.id"
            :label="item.storeName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="业务日期：" prop="businessDate">
        <el-date-picker
          v-model="form.businessDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYYMMDD"
        />
      </el-form-item>
      <el-form-item label="创建人：" prop="createUserId">
        <el-select
          v-model="form.createUserId"
          placeholder="请选择"
          clearable
          filterable
          class="!w-[180px]"
        >
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <PureTableBar
      class="mt-0"
      style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
      title=""
      :columns="columns"
      @refresh="onSearch"
    >
      <template #left>
        <!-- 主订单状态 0 待审核 1 发货中 2 部分发货 3 已发货 4 已完成 5 已驳回 6 已取消 7 已关闭 -->
        <el-tabs v-model="tabType" class="mt-[15px] h-[28px]">
          <template v-for="item of tabList" :key="item.itemValue">
            <el-tab-pane :label="item.label" :name="item.name">
              <template #label>
                <span>{{ item.label }}</span>
                <span v-if="item.count" class="pl-1"> ({{ item.count }})</span>
              </template>
            </el-tab-pane>
          </template>
        </el-tabs>
      </template>
      <!-- <template #buttons>
        <el-button type="primary" @click="openDialog()">
          新增跨店销售单
        </el-button>
      </template> -->
      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          row-key="id"
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          adaptive
          :adaptiveConfig="{ offsetBottom: 90 }"
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="pagination"
          :paginationSmall="size === 'small' ? true : false"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
          <template #expand="{ row }">
            <div class="ml-[40px]">
              <pure-table
                row-key="id"
                align-whole="center"
                :data="row.crossStoreOrderItemList"
                :columns="childColumns"
                :header-cell-style="{
                  background: 'var(--el-fill-color-light)',
                  color: 'var(--el-text-color-primary)'
                }"
              >
                <!-- 商品名称/规格名称 -->
                <template #specName="scope">
                  <div class="flex items-center mr-[-12px]">
                    <ImageViewer
                      :src="scope.row.specImageJson || row.imageJson"
                    />
                    <el-tooltip
                      effect="dark"
                      :content="scope.row.specName || scope.row.goodsName"
                      placement="top-start"
                    >
                      <span class="ml-[5px] truncate">
                        {{ scope.row.specName || scope.row.goodsName }}
                      </span>
                    </el-tooltip>
                  </div>
                </template>
                <template #specCode="{ row }">
                  <el-tooltip
                    effect="dark"
                    :content="row.specCode || row.goodsCode"
                    placement="top-start"
                  >
                    <div class="text-cut">
                      {{ row.specCode || row.goodsCode }}
                    </div>
                  </el-tooltip>
                </template>
              </pure-table>
            </div>
          </template>
          <template #operation="{ row }">
            <div v-if="row.suborderOrderStatus === 0">
              <el-popconfirm
                :title="`是否确认通过?`"
                @confirm="handleOpt(row, 1)"
              >
                <template #reference>
                  <el-button class="!ml-1" link type="primary">通过</el-button>
                </template>
              </el-popconfirm>
              <el-popconfirm
                :title="`是否确认驳回?`"
                @confirm="handleOpt(row, 2)"
              >
                <template #reference>
                  <el-button class="!ml-1" link type="danger">驳回</el-button>
                </template>
              </el-popconfirm>
            </div>
            <div v-else>--</div>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
</template>
